<template>
  <div class="subject-list">
    <h2>{{ subject }}</h2>
    <div class="subject-cards">
      <div 
        v-for="card in subjectCards" 
        :key="card.title" 
        class="subject-card"
      >
        <img src="@/assets/background.jpg" title="Course Image"lt="Course Image" />
        <div class="card-info">
          <h3>{{ card.title }}</h3>
          <p>{{ card.description }}</p>
          <p class="price">¥{{ card.price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    subject: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      subjectCards: [
        {
          title: '1年级--语文',
          description: '专授1年级语文知识',
          price: 368
        },
        {
          title: '2年级--语文',
          description: '专授2年级语文知识',
          price: 520
        },
        // 其他卡片数据...
      ]
    };
  },
  created() {
    // 根据传入的 subject 动态加载对应的卡片数据
    if (this.subject === '语文') {
      // 加载语文相关的卡片数据
    } else if (this.subject === '数学') {
      // 加载数学相关的卡片数据
    }
    // 其他科目的数据加载...
  }
};
</script>

<style scoped>
.subject-list {
  text-align: center;
}

.subject-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.subject-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  margin: 10px;
  width: calc(33% - 20px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.subject-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card-info {
  padding: 10px;
}

.card-info .price {
  color: red;
  font-weight: bold;
}
</style>